<template>
  <div class="kk1">
    <div class="top">
      <el-card class="box-card">
        <el-form ref="refForm" :inline="true" :model="formInline" class="demo-form-inline">
          <el-row>
            <el-col :span="6">
              <div class="divLable first">仓库名称</div>
              <el-form-item>
                <el-input v-model="formInline.code" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <div class="divLable">库区名称</div>
              <el-form-item>
                <el-input v-model="formInline.name" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <div class="divLable">仓库状态</div>
              <el-form-item>
                <el-select v-model="formInline.status" placeholder="活动区域">
                  <el-option label="全部" value="" />
                  <el-option label="停用" value="0" />
                  <el-option label="启用" value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="btn">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="info" @click="resetFrom">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </el-card>
    </div>
    <div class="conten">
      <el-card class="box-card">
        <el-button class="importantButton btnAdd" @click="addWarehouse">新增库区</el-button>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{'text-align':'center',background:'#f5f7fa',color:'#606266'}"
          :cell-style="{'text-align':'center'}"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
          />
          <el-table-column
            prop="warehouseName"
            label="所属仓库"
            width="120"
          />
          <el-table-column
            prop="code"
            label="库区编号"
            width="120"
          />
          <el-table-column
            prop="name"
            label="库区名称"
            width="120"
          />
          <el-table-column
            prop="temperatureType"
            label="温度类型"
            width="300"
          >
            <template #default="scope">
              {{ ckType[scope.row.temperatureType] }}
            </template>
          </el-table-column>

          <el-table-column
            prop="bearingType"
            label="称重类型"
          >
            <template #default="scope">
              {{ typeValue[scope.row.bearingType] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="useType"
            label="用途属性"
          >  <template #default="scope">
            {{ useType[scope.row.useType] }}
          </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="库区状态"
            width="120"
          >
            <template #default="scope">
              {{ wada[scope.row.status] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="personName"
            label="负责人"
            width="120"
          />
          <el-table-column
            prop="phone"
            label="联系电话"
            width="120"
          />
          <el-table-column
            prop="includedNum"
            label="库位数量"
            width="120"
          />
          <el-table-column
            prop="updateTime"
            label="更新时间"
            width="120"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="150"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row.id)">编辑</el-button>
              <el-button v-if="scope.row.status" type="text" size="small" @click="reset(scope.row)">停用</el-button>
              <el-button v-else type="text" size="small" @click="reset(scope.row)">启用</el-button>
              <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="fyq">
          <el-pagination
            :current-page="1"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="changeShow"
      width="30%"
      :before-close="changeClose"
    >
      <span>确定要{{ typeopen }}{{ currentName }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeShow = false">取 消</el-button>
        <el-button type="primary" @click="changeHouseStatus">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { changeHouseList, delHouseList, searchKqlist } from '@/api/index'
export default {
  data() {
    return {
      formInline: {
        // 仓库编号
        code: '',
        // 仓库名称
        name: '',
        // 仓库状态
        status: '',
        // 当前页
        current: 1,
        // 每页显示几条
        size: 30
      },
      // 接受回来的仓库数据
      tableData: [],
      // 分页显示总数据数量
      total: 30,
      typeValue: {
        ZX: '重型',
        QX: '轻型',
        BX: '中型'
      },
      ckType: {
        LC: '冷藏',
        HW: '恒温',
        CW: '常温'
      },
      useType: {
        RKHCQ: '入库缓存区',
        CKHCQ: '出库缓存区',
        CCQ: '存储区',
        FJQ: '分拣区',
        ZJQ: '质检区'
      },
      // 用途属性
      wada: ['禁用', '启用'],
      // 开启和关停的dialog显藏框
      changeShow: false,
      // 当前dialog框中显示的删除名字
      currentName: '',
      // dialog中显示启用还是停用
      typeopen: '',
      // dialog中用来发起停用和启用时候发起的请求表单
      dialogValue: {
        id: null,
        status: null
      },
      // delId  删除仓库的id
      delId: null
    }
  },
  created() {
    // this.getCk()
    this.searchKqlistFn()
  },
  methods: {
    search() {
      // console.log('submit!')
      console.log(this.formInline)
      this.getCk()
    },
    resetFrom() {
      // 重置表单
      this.formInline = {
        code: '',
        name: '',
        status: ''
      }
    },
    // 新建仓库
    addWarehouse() {
      console.log('新建仓库')
      this.$router.push('/warehouse/details/null')
    },
    // table
    handleClick(id) {
      console.log(id)
      this.$router.push({
        path: `/warehouse/details/null`,
        query: {
          id
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formInline.size = val
      this.getCk()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formInline.current = val
      this.getCk()
    },
    // 关闭和重启功能实现
    reset(val) {
      console.log(val.status)
      if (val.status === 1) {
        this.typeopen = '停用'
      } if (val.status === 0) {
        this.typeopen = '启用'
      }
      this.currentName = val.name
      this.dialogValue.id = val.id
      this.dialogValue.status = val.status === 1 ? 0 : 1
      this.changeShow = true
      console.log(this.dialogValue)
    },
    // 关闭重启关停dialog
    changeClose() {
      this.changeShow = false
      this.dialogValue.id = null
      this.dialogValue.status = null
    },
    // 改变仓库状态
    async changeHouseStatus() {
      try {
        await changeHouseList(this.dialogValue)
        this.$message.success(this.typeopen + `成功`)
        this.getCk()
      } catch (error) {
        console.log(error)
        this.$message.error(this.typeopen + `失败`)
      }
      this.changeShow = false
    },
    // 删除仓库
    del(val) {
      console.log(val)
      this.$confirm('此操作将永久删除该仓库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async() => {
        await delHouseList(val)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getCk()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 库区管理
    // 拿到库区数据
    async searchKqlistFn() {
      const { data } = await searchKqlist(this.formInline)
      this.tableData = data.data.records
    }
  }
}
</script>
<style lang="scss" scoped>
.box-card{
  padding: 20px 10px 0;
  .fyq{
    text-align: center;
    margin: 10px;
  }
}
.divLable{
    font-family: PingFangSC,PingFangSC-Medium;
    font-weight:bold;
    font-size: 14px;
    margin-bottom: 5px;
}
.el-button{
border-radius: 20px !important;
}
.btn{
  margin-top: 20px;
}
.el-card__body{
   padding: 0 !important;
}
.importantButton {
    background: #00be76;
    color: #fff;
    margin: -5px 15px 15px 15px;
}

</style>
<style>

.el-card__body{
   padding: 0 !important;
}
.el-input__inner{
  width: 115%;
}
.conten{
  margin-top: 20px;
}
.kk1{
  padding: 20px;
}
</style>
